import React, { useState, useEffect } from "react";
import { getUnissuedTasks } from "../services/api";
import { DataTable } from "../components/SlotTable";
import { formatToBeijingTime } from "../utils/timeUtils";

const UnissuedTasksPage = () => {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    loadTasks();
  }, []);

  const loadTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await getUnissuedTasks();
      setTasks(data || []);
    } catch (err) {
      console.error("加载未下发任务失败:", err);
      setError("加载未下发任务失败: " + err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleRefresh = () => {
    loadTasks();
  };

  return (
    <div style={{ padding: "20px", background: "#1a1a1a", minHeight: "100vh" }}>
      <div
        style={{
          background: "rgba(30, 30, 30, 0.9)",
          padding: "20px",
          borderRadius: "10px",
          border: "2px solid #2196F3",
          backdropFilter: "blur(10px)",
          marginBottom: "20px",
        }}
      >
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: "20px",
          }}
        >
          <h1 style={{ color: "#2196F3", margin: 0 }}>📋 未下发任务列表</h1>
          <button
            onClick={handleRefresh}
            disabled={loading}
            style={{
              padding: "10px 20px",
              backgroundColor: "#2196F3",
              color: "white",
              border: "none",
              borderRadius: "5px",
              cursor: loading ? "not-allowed" : "pointer",
              opacity: loading ? 0.6 : 1,
            }}
          >
            {loading ? "⏳ 刷新中..." : "🔄 刷新"}
          </button>
        </div>

        {error && (
          <div
            style={{
              backgroundColor: "#f44336",
              color: "white",
              padding: "10px",
              borderRadius: "5px",
              marginBottom: "20px",
            }}
          >
            ❌ {error}
          </div>
        )}

        <div style={{ overflowX: "auto" }}>
          <DataTable
            data={tasks}
            columns={[
              { key: "id", title: "任务ID" },
              { key: "Task_No", title: "任务编号" },
              { key: "Job_Style", title: "作业类型" },
              { key: "Unload_Line", title: "排" },
              { key: "Unload_Col", title: "列" },
              { key: "Unload_Layer", title: "层" },
              { 
                key: "created_at", 
                title: "创建时间",
                render: (value) => formatToBeijingTime(value)
              }
            ]}
          />
        </div>

        <div style={{ marginTop: "20px", color: "#ddd", fontSize: "14px" }}>
          <p>总计: {tasks.length} 个未下发任务</p>
        </div>
      </div>
    </div>
  );
};

export default UnissuedTasksPage;